<template>
    <div class="Page Confirm">
        <div class="Title">
            <h1 class="orderTitle" style="text-align: center;">订单确认</h1>
            <div class="clear"></div>
        </div>
        <form name="flowForm" id="flowForm" method="post" action="">
            <table class="GoodList">
                <tbody>
                    <tr>
                        <th class="name text2">商品</th>
                        <th class="price text2">原价</th>
                        <th class="priceNew text2">价格</th>
                    </tr>
                </tbody>
                <tbody>
                    <tr>
                        <td colspan="3" class="teacher">
                            <i class="text2">授课教师：{{ orderInfo.teacherName }}</i>

                        </td>
                    </tr>
                    <tr class="good">
                        <td class="name First">
                            <a target="_blank" :href="'/course/' + orderInfo.courseId">
                                <img :src="orderInfo.cover">
                            </a>
                            <div class="goodInfo">
                                <a target="_blank" :href="'/course/' + orderInfo.courseId">
                                    <p class="text3">{{ orderInfo.title }}</p>
                                </a>

                            </div>
                        </td>
                        <td class="price">
                            <p class="text4">￥{{ orderInfo.price }}</p>
                        </td>
                        <td class="red priceNew Last text4">￥{{ orderInfo.price }}</td>
                    </tr>
                    <tr>
                        <td class="Billing tr" colspan="3">
                            <div class="tr">
                                <p class="red text6">共 1 件商品 合计￥{{ orderInfo.price }}</p>
                            </div>
                        </td>
                    </tr>
                </tbody>
            </table>
            <div class="Finish">
                <div class="clear"></div>
                <div class="Main fl">
                    <div class="fl">
                        <el-button type="success" size="big">
                            <a :href="'/course/' + orderInfo.courseId">返回课程详情页</a>
                        </el-button>
                    </div>

                </div>
                <input name="score" value="0" type="hidden" id="usedScore">
                <el-button type="warning" @click="toPay(orderInfo)">前往支付</el-button>
                <div class="clear"></div>
            </div>
        </form>
    </div>
</template>

<script>
import order from '@/api/order'
export default {
    //根据订单id获取订单信息
    asyncData({ params, error }) {
        return order.getOrderById(params.oid).then(response => {
            return {
                orderInfo: response.data.data.tOrder
            }
        })
    },


    methods: {
        //点击去支付，跳转到支付页面
        toPay(orderInfo) {
            console.log(orderInfo)
            this.$confirm('此操作将购买该课程, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                // 执行.then说明需要删除，后面执行删除代码
                order.toPay(orderInfo).then(response => {
                    if (response.data.success) {
                        // 提示信息
                        this.$message({
                            type: 'success',
                            message: '课程购买成功!'
                        });
                        this.$router.push({ path: '/course/' + orderInfo.courseId })
                    }
                })
            })
        }
    }


}
</script>

<style scoped>
.text2 {
    font-size: 24px;
    color: black;
}

.orderTitle {
    font-size: 32px;
    color: rgb(36, 36, 36);
}

.text3 {
    font-size: 20px;
    text-decoration: none;
    margin-top: 18px;
}

:hover {
    text-decoration: none;
    color: brown;
}

.text4 {
    font-size: 30px;
    text-decoration: none;
    color: #e6a23c;
}

.text6 {
    font-size: 20px;
    text-decoration: none;
    margin-top: 18px;
    color: red;
}

:hover {
    text-decoration: none;
    color: #e6a23c;
}
</style>
